<template>
	<view class="desk-main">
		<view class="tp">
			<view class="logo">
				<image mode="widthFix" class="tt" :src="desk.deskThum.url"></image>
			</view>
			<view  class="deskinfo">
				<view class="name" v-text="deskName"></view>
				<view class="type" v-text="'品牌：' + desk.deskBrand.deskBrandName"></view>
				<view class="type" v-text="'类型：' + desk.deskType.deskTypeName"></view>
				<view class="type type1" v-text="'价格：¥ ' + desk.deskPrice"></view>
			</view>
		</view>
		<view class="params">
			<image class="paramitem" mode="widthFix" v-for="item in desk.deskParamImgs" :key="item.attId" :src="item.url"></image>
		</view>
		<view>
			<feedback></feedback>
		</view>
	</view>
</template>

<script>
	import {apiBase, get_desk_main} from '../../request/index.js'
	import feedback from '../../common/feedback/feedback.vue';
	export default {
		components : {feedback},
		onLoad(options) {
			this.deskId = options.deskId;
			this.deskName = options.deskName;
			this.brandName = options.brandName;
			uni.setNavigationBarTitle({
				title: this.topic
			});
		},
		computed : {
			topic () {
				return this.brandName + " - " + this.deskName;
			}
		},
		data() {
			return {
				deskId : "",
				deskName : "",
				brandName: "",
				desk : {}
			}
		},
		onShow() {
			this.get_desk_main();
		},
		onShareAppMessage(){
			return {
				title: this.topic,
				path: "/pages/deskmain/deskmain?deskId=" + this.deskId + "&deskName=" + this.deskName + "&brandName=" + this.brandName
			}
		},
		onShareTimeline() {
			return {
				title: this.topic,
				path: "/pages/deskmain/deskmain?deskId=" + this.deskId + "&deskName=" + this.deskName + "&brandName=" + this.brandName
			}
		},
		methods: {
			async get_desk_main (){
				try{
					const res = await get_desk_main(this.deskId);
					if(res.success){
						res.data.deskThum.url = apiBase + res.data.deskThum.url;
						res.data.deskParamImgs.forEach(d => {
							d.url = apiBase + d.url;
						});
						this.desk = res.data;
					}else {
						
					}
				}catch(e){
					//TODO handle the exception
					console.log(e);
				}
			}
		}
	}
</script>

<style>
.desk-main{
	padding: 25rpx;
}

.tp{
	
}

.tp .logo{
	width: 100%;
}

.tp .logo .tt{
	width: 100%;
}

.tp .deskinfo{
	
}

.tp .deskinfo .name{
	font-size: 24px;
	font-weight: bold;
}

.tp .deskinfo .type{
	margin-top: 5px;
	color: rgb(50, 39, 88);
}

.tp .deskinfo .type1{
	color: red;
}

.tp .deskname{
	vertical-align: middle;
}

.tp .logo .tt{
	width: 100%;
}

.params{
	margin-top: 40rpx;
	padding-bottom: 50rpx;
}

.params .paramitem{
	width: 100%;
}
</style>
